import React, {FC, useState} from "react";
import styles from './common.module.scss'
import {Typography,Empty,Table,Tag,Button,Space,Modal} from "antd";
import {useTitle} from 'ahooks'
import {ExclamationCircleOutlined} from "@ant-design/icons";
import QuestionCard from "../../components/QuestionCard.tsx";
const {Title} = Typography
const {confirm} = Modal
const rawQuestionList = [
    { _id: 'q1', title: '问卷1', isPublished: false, isStar: true, answerCount: 5, createAt: '5月4日 13:23' },
    { _id: 'q2', title: '问卷2', isPublished: false, isStar: false, answerCount: 3, createAt: '5月4日 13:23' },
    { _id: 'q3', title: '问卷3', isPublished: false, isStar: true, answerCount: 2, createAt: '5月4日 13:23' },
    { _id: 'q4', title: '问卷4', isPublished: true, isStar: false, answerCount: 1, createAt: '5月4日 13:23' },
]
const Trash:FC=()=>{
    useTitle('鹏宇问卷 - 回收站')
    const [questionList, setQuestionList] = useState(rawQuestionList)
    //记录选中的id
    const [selectedIds, setSelectedIds] = useState<string[]>([])
    function del(){
        confirm({
            title:'确认删除该问卷？',
            icon:<ExclamationCircleOutlined/>,
            content:'删除以后不可找回',
            onOk:()=> alert(`删除${JSON.stringify(selectedIds)}`)
        })
    }
    const tableColumns=[{
        title:'标题',
        dataIndex:'title',
        //循环列的key默认取dataIndex的值
    },
        {
            title:'是否发布',
            dataIndex:'isPublished',
            render:(isPublished:boolean)=>{
                return  isPublished ? <Tag color="processing">已发布</Tag> : <Tag>未发布</Tag>
        }
        },
        {
            title:'答卷',
            dataIndex:'answerCount',
        },
        {
            title:'创建时间',
            dataIndex:'createdAt',
        },
    ]
    //可以把jsx片段定义成一个变量
    const TableElem = <>
    <div>
        <Space>
            <Button type="primary" disabled={selectedIds.length === 0}>恢复</Button>
            <Button danger disabled={selectedIds.length === 0} onClick={del}>彻底删除</Button>
        </Space>
    </div>
        <Table dataSource={questionList}
               columns={tableColumns}
               pagination={false}
               rowKey={q=>q._id}
               rowSelection={{
                   type:'checkbox',
                   onChange:  (selectedRowKeys)=>{
                       setSelectedIds(selectedRowKeys as string[])
                   },
               }}
        />
    </>
    return <>
        <div className={styles.header}>
            <div >
                <Title level={3}>回收站</Title>
            </div>
            <div className={styles.right}>（搜索）</div>
        </div>
        <div className={styles.content}>
            {/*{生成回收站列表，没有就是空}*/}
            {questionList.length === 0 && <Empty description="暂无数据 "/>}
            {questionList.length > 0 && TableElem}
        </div>
        <div className={styles.footer}>分页</div>
    </>
}
export default Trash